<template>
	<div>
		<el-dialog title="积分抵扣现金" :visible.sync="dialogVisible" width="650px" :close-on-click-modal="false" @close="close">
			<!-- 表单 -->
			<div v-loading="loading" class="form">
				<el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
					<el-form-item label="功能开关：" class="use-limit-box"><el-switch v-model="form.enableUsePoints" /></el-form-item>

					<!-- 启用设置 -->
					<el-collapse-transition>
						<div v-if="form.enableUsePoints">
							<!-- 积分系数 -->
							<el-form-item label="积分系数：" class="use-limit-box form-item-bottom">
								<span>每&nbsp;&nbsp;</span>
								<el-form-item prop="baseUseAmount" style="display:inline-block">
									<el-input v-model="form.baseUseAmount" maxlength="7" class="input-append-200" />
									&nbsp;&nbsp;个积分抵扣&nbsp;&nbsp;
								</el-form-item>
								<!-- <el-form-item prop="deduction" style="display:inline-block">
									<el-input v-model="form.deduction" maxlength="7" class="input-append-200">
										<template slot="append">
											元
										</template>
									</el-input>
								</el-form-item> -->
								<el-form-item prop="deduction" style="display:inline-block">1元</el-form-item>
							</el-form-item>

							<!-- 积分上限 -->
							<el-form-item label="抵扣上限：" class="use-limit-box form-item-bottom">
								<div><el-radio v-model="form.deductionLimitRadio" :label="0">无上限</el-radio></div>
								<div>
									<el-radio v-model="form.deductionLimitRadio" :label="1">单次最多抵扣&nbsp;&nbsp;</el-radio>
									<el-form-item prop="deductionLimit" style="display:inline-block">
										<el-input v-model="form.deductionLimit" :disabled="form.deductionLimitRadio === 0" maxlength="7" class="input-append-200">
											<template slot="append">
												元
											</template>
										</el-input>
									</el-form-item>
								</div>
							</el-form-item>

							<!-- 退款积分 -->
							<el-form-item label="退款积分：" class="use-limit-box">
								<el-radio v-model="form.addAfterRefund" :label="true">消费退款后返还已扣除的积分</el-radio>
								<br />
								<el-radio v-model="form.addAfterRefund" :label="false">不返还积分</el-radio>
							</el-form-item>
							 <el-form-item label="使用范围：" class="use-limit-box" prop="usedScopes">
								<el-checkbox-group v-model="form.usedScopes">
									<el-checkbox :label="1">小程序消费抵扣  
										<el-tooltip class="item" effect="dark" content="小程序消费抵扣指用户可在小程序下单使用积分抵扣现金；" placement="top-start">
										<i class="el-icon-question" />
										</el-tooltip>
									</el-checkbox>
									<el-checkbox :label="2">扫码消费抵扣
										<el-tooltip class="item" effect="dark" content="扫码消费抵扣指用户可在扫码商户码牌使用积分抵扣现金；" placement="top-start">
											<i class="el-icon-question" />
										</el-tooltip>
									</el-checkbox>
									</el-checkbox-group>
									<div>注：必选中一项，未选中的场景表示用户不可在这种场景使用积分抵扣；</div>
							</el-form-item>
						</div>
					</el-collapse-transition>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" round @click="hide">取 消</el-button>
				<el-button size="small" round type="primary" :loading="loading" @click="handleSubmit()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { validatePositiveInt } from '@/utils/validate.js';
import { updatePointsConfig } from '@/api/points';
export default {
	data() {
		/**
		 * 表单校验方法
		 */
		const validateBaseUseAmount = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入积分数'));
			} else if (!validatePositiveInt(value)) {
				callback(new Error('请输入正整数'));
			} else {
				callback();
			}
		};
		const validateDeduction = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入金额'));
			} else if (!validatePositiveInt(value)) {
				callback(new Error('请输入正整数'));
			} else {
				callback();
			}
		};
		const validateDeductionLimit = (rule, value, callback) => {
			if (this.form.deductionLimitRadio === 0) {
				callback();
			} else if (value === '') {
				callback(new Error('请输入抵扣上限'));
			} else if (!validatePositiveInt(value)) {
				callback(new Error('请输入正整数'));
			} else {
				callback();
			}
		};
		return {
			option: this.$route.params,
			/**
			 * 表单校验字段
			 */
			rules: {
				baseUseAmount: [
					{
						required: true,
						validator: validateBaseUseAmount,
						trigger: ['blur', 'change']
					}
				],
				deduction: [
					{
						required: true,
						validator: validateDeduction,
						trigger: ['blur', 'change']
					}
				],
				deductionLimit: [
					{
						required: true,
						validator: validateDeductionLimit,
						trigger: ['blur', 'change']
					}
				],
				usedScopes: [
					{ type: 'array', required: true, message: '使用范围至少要选择一项', trigger: 'change' }
				],
			},
			// 配置
			resolve: null,
			reject: null,
			// 状态
			dialogVisible: null,
			loading: false,
			// 数据
			form: {
				enableUsePoints: false,
				deductionLimitRadio: 0,
				deduction: 1
			}
		};
	},
	watch: {
		form: {
			handler: function(val) {
				this.$nextTick(() => {
					if (val.enableUsePoints && val.deductionLimitRadio === 0) {
						this.$refs.form.clearValidate(['deductionLimit']);
					}
				});
			},
			deep: true
		}
	},
	methods: {
		open(data) {
			this.form = this.resetData(data);
			console.log(this.form)
			this.show();
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		// 格式化数据
		resetData(data) {
			const form = Object.assign({}, data);
			if (form.deductionLimit === 0) {
				form.deductionLimit = '';
				form.deductionLimitRadio = 0;
			} else {
				form.deductionLimitRadio = 1;
			}
			return form;
		},

		show() {
			this.dialogVisible = true;
		},

		close() {
			this.form = {
				enableUsePoints: false,
				deductionLimitRadio: 0
			};
			this.loading = false;
			this.$refs.form.resetFields();
		},

		hide() {
			this.resolve = null;
			this.reject = null;
			this.dialogVisible = false;
		},

		handleSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					const params = {};
					if (this.form.enableUsePoints) {
						params.enableUsePoints = this.form.enableUsePoints;
						params.baseUseAmount = this.form.baseUseAmount;
						params.deduction = this.form.deduction * 100;
						params.addAfterRefund = this.form.addAfterRefund;
						if (this.form.deductionLimitRadio === 0) {
							params.deductionLimit = 0;
						} else {
							params.deductionLimit = this.form.deductionLimit * 100;
						}
					} else {
						params.enableUsePoints = this.form.enableUsePoints;
					}
					params.id = this.form.id;
					params.usedScopes = this.form.usedScopes
					this.loading = true;
					updatePointsConfig(params)
						.then(res => {
							this.$notify({
								title: '成功',
								message: '保存成功',
								type: 'success',
								duration: 2000,
								offset: 40
							});
							this.$root.$emit('pointsResetConfig', res.data);
							this.hide();
							if (this.option.changeType == 'spMbPoints') {
								this.$router.back();
							}
						})
						.finally(() => {
							this.loading = false;
						});
				}
			});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.form {
	margin-top: 20px;
	.input-append-200 {
		width: 160px;
	}
	/* margin-bottom 0px */
	.form-item-bottom {
		margin-bottom: 0;
	}
}
</style>
